<template>
  <view class="schedule">
    <g-month-calendar
      :more="false"
      bg-color="linear-gradient(180deg, #ABD49D 0%, #4EA770 100%)"
      color="#fff"
      align="center"
      checked-class="active-checked"
      :dot-list="dotList"
      show-back
      :dot-style="{
        background: '#fff',
      }"
      @selected-change="changeDate"
      @days-change="daysChange"
    >
      <view class="schedule-content">
        <view
          class="schedule-item"
          v-for="(item, index) in dataList"
          :key="index"
          :style="{
            '--statusColor': getColor(item.status),
          }"
        >
          <view class="schedule-item-left">
            <view class="date">
              {{ timeFormat(Number(new Date(item.orderAcceptanceTime))) }}-{{
                timeFormat(Number(new Date(item.overTime)))
              }}
            </view>
            <view class="title">{{ item.title }}</view>
          </view>
          <view class="schedule-item-right">
            <uv-icon
              bold
              :name="getStatusIcon(item.status)"
              :color="getStatusCOlor(item.status)"
              :label="getStatusLabel(item.status)"
              label-color="#757575"
            />
          </view>
        </view>
        <uv-load-more v-if="dataList.length > 0" :status="status" line />
        <uv-empty v-else margin-top="20vh" :icon="empty" text="今天还没有安排日程哦" />
      </view>
    </g-month-calendar>
  </view>
</template>
<script setup>
import { ref, onMounted, watch } from "vue";
import { timeFormat } from "@/common/mothed.js";
import { getDateMarks, getDateSchedules } from "@/request/home.js";
import empty from "@/static/empty.png";

const props = defineProps({
  // 是否下拉刷新
  refresh: {
    type: Boolean,
    default: false,
  },
  // 上拉加载
  onMore: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["onRefresh", "onReach"]);

const queryParams = ref({
  time: timeFormat(Number(new Date())), // 当前日期
  pageNum: 1, // 当前页码
  pageSize: 20, // 每页条数
});
const total = ref(0); // 总条数
const beginTime = ref(); // 本周开始时间
const endTime = ref(); // 本周结束时间
const dataList = ref([]); // 日程列表
const dotList = ref([]); // 标记列表
const status = ref("loadmore"); // 加载状态

onMounted(() => {
  getList();
});

watch(
  props,
  (v) => {
    if (v.refresh) {
      setTimeout(() => {
        queryParams.value.pageNum = 1;
        getList();
      }, 0);
    }
    if (v.onMore) {
      if (total.value > dataList.value.length) {
        queryParams.value.pageNum += 1;
        getList();
      }
    }
  },
  { immediate: true, deep: true }
);

// 获取标记列表
const getMarks = () => {
  getDateMarks({
    beginTime: beginTime.value,
    endTime: endTime.value,
  }).then((res) => {
    dotList.value = res.data;
  });
};

// 获取数据列表
const getList = () => {
  status.value = "loading";
  getDateSchedules(queryParams.value)
    .then((res) => {
      if (res.code == 200) {
        dataList.value =
          queryParams.value.pageNum == 1 ? res.rows : dataList.value.concat(res.rows);
        total.value = res.total;
      }
    })
    .finally(() => {
      emit("onRefresh", false);
      uni.stopPullDownRefresh();
      status.value = total.value == dataList.value.length ? "nomore" : "loadmore";
      if (props.onMore) emit("onReach", false);
    });
};

// 日期改变
const changeDate = (date) => {
  queryParams.value.time = date;
  queryParams.value.pageNum = 1;
  getList();
};

// 日期范围
const daysChange = (date) => {
  beginTime.value = timeFormat(Number(date.start));
  endTime.value = timeFormat(Number(date.end));
  getMarks();
};

// 状态图标
const getStatusIcon = (status) => {
  switch (status) {
    case 5:
      return "play-circle";
    case 6:
      return "checkbox-mark";
    case 7:
      return "checkmark-circle";
    default:
      return "";
  }
};

// 状态图标颜色
const getStatusCOlor = (status) => {
  switch (status) {
    case 5:
      return "#007AFF";
    case 6:
      return "#4EA770";
    case 7:
      return "#37B23E";
    default:
      return "";
  }
};

// 状态颜色
const getColor = (status) => {
  switch (status) {
    case 5:
      return "#87BCF5";
    case 6:
    case 7:
      return "#85C889";
    default:
      return "";
  }
};

// 状态中文显示
const getStatusLabel = (status) => {
  switch (status) {
    case 5:
      return "维修中";
    case 6:
      return "待复验";
    case 7:
      return "已完结";
    default:
      return "";
  }
};
</script>
<style lang="scss" scoped>
.schedule {
  padding: 30rpx;
  box-sizing: border-box;
  .schedule-content {
    padding: 20rpx;
    min-height: 60vh;
  }
}
:deep(.is-today) {
  color: #fff !important;
}
:deep(.active-checked) {
  background-color: #fff !important;
  color: #4ea770 !important;
}
.schedule-item {
  --statusColor: #f2ce90;
  width: auto;
  height: 120rpx;
  background: #f6f6f6;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  overflow: hidden;
  &-left {
    width: calc(100% - 240rpx);
    height: 100%;
    padding-left: 60rpx;
    position: relative;
    border-right: 2rpx solid #e7e7e7;
    display: flex;
    flex-direction: column;
    justify-content: center;
    &::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 20rpx;
      height: 120rpx;
      background-color: var(--statusColor);
    }
    .date {
      font-size: 28rpx;
      color: #757575;
    }
    .title {
      font-size: 28rpx;
      color: #212121;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  &-right {
    width: 180rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  &:last-child {
    margin-bottom: 0;
  }
}
</style>
